<template>
  <div class="totality">
    <div class="picture">
      <img
        :src="require('../../assets/img/Questionimg/图层 1@2x.png')"
        alt=""
      />
    </div>

    <div class="worry">
      <div class="worry-top">
        <div class="worry-img">
          <img
            :src="require('../../assets/img/Questionimg/矢量智能对象@2x.png')"
            alt=""
          />
          <div class="worry-group">心事群</div>
        </div>
        <div class="worry-more">
          <div class="worry-text">更多</div>
        </div>
      </div>
      <div class="worry-middle">
        <div class="worry-left">
          <img
            :src="require('../../assets/img/Questionimg/图层 4@2x.png')"
            alt=""
          />
        </div>
        <div class="worry-right">
          <img
            :src="require('../../assets/img/Questionimg/图层 3@2x.png')"
            alt=""
          />
          <img
            :src="require('../../assets/img/Questionimg/图层 2@2x.png')"
            alt=""
          />
        </div>
      </div>
    </div>

    <div class="input">
      <div class="inputmin">
        <van-search
          id="aa"
          v-model="value"
          shape="round"
          label="置顶"
          background="#F4F4F4"
          placeholder="当前还没有置顶心事"
        />
      </div>
    </div>

    <div class="three">
      <div class="three-headline" style="borderradius: 5px 0px 0px 5px">
        推荐
      </div>
      <div class="three-headline">最新</div>
      <div class="three-headline" style="borderradius: 0px 5px 5px 0px">
        关注
      </div>
    </div>

    <!-- 下拉加载 -->
    <van-list
      v-model:loading="states.loading"
      loading-text="加载中..."
      :finished="states.finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in states.list" :key="item">
        <div class="topic">
          <div class="headportrait">
            <img class="photo" :src="item.userhead" alt="" />
            <div class="name">
              <div class="nameframe">
                <div class="nickname">{{ item.username }}</div>
                <div class="sex">
                  <img
                    :src="
                      require('../../assets/img/Questionimg/矢量智能对象@2x(3).png')
                    "
                    alt=""
                  />
                </div>
              </div>
              <div class="register">{{ item.port }}</div>
            </div>
          </div>

          <div class="bigheadline">{{ item.title }}</div>

          <div class="text">
            {{ item.issue }}
          </div>

          <div class="varied">
            <div class="label">#{{ item.gambit }}#</div>
            <div class="lovecomment">
              <div class="love">
                <img
                  :src="
                    require('../../assets/img/Questionimg/矢量智能对象@2x(1).png')
                  "
                  alt=""
                />
              </div>
              <div class="figure-1">{{ item.prasie }}</div>
              <div class="comment">
                <img
                  :src="
                    require('../../assets/img/Questionimg/矢量智能对象@2x(2).png')
                  "
                  alt=""
                />
              </div>
              <div class="figure-2">{{ item.comment }}</div>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>

    <div class="extra">
      <img :src="require('../../assets/img/Questionimg/组 2@2x.png')" alt="" />
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed, onMounted, reactive } from "vue";
export default {
  setup() {
    const value = "";
    const store = useStore();
    const questiondata = () => store.dispatch("questiondata");
    const questlist = reactive(computed(() => store.state.Question.questlist));
    onMounted(() => {
      questiondata();
    });
    const states = reactive({
      list: [],
      loading: false,
      finished: false,
    });
    const onLoad = () => {
      let time = null;
      clearTimeout(time);
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      time = setTimeout(() => {
        for (let i = 0; i < 2; i++) {
          states.list = states.list.concat(
            questlist.value.slice(states.list.length, states.list.length + 1)
          );
          //  console.log(questlist.value)
        }
        // 加载状态结束
        states.loading = false;

        // 数据全部加载完成
        if (states.list.length >= 7) {
          states.list.length = 7;
          states.finished = true;
        }
      }, 1000);
    };

    return {
      value,
      states,
      store,
      questlist,
      questiondata,
      onLoad,
    };
  },
};
</script>

<style lang="less" scoped>
.totality {
  margin-bottom: 56px;
}
.picture {
  img {
    height: 160px;
    width: 100%;
  }
}
.worry {
  padding-left: 12px;
  padding-right: 13.5px;

  .worry-top {
    display: flex;
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .worry-img {
    display: flex;

    img {
      width: 22px;
      height: 22px;
      margin-right: 5px;
    }
    .worry-group {
      // height: 47px;
      font-size: 15px;
      // font-family: PingFang SC;
      font-weight: 540;
      color: #585858;
      // font-style: PingFang-SC-Regular;
    }
  }

  .worry-more {
    width: 37.5px;
    height: 17px;
    border: 1px solid #cccccc;
    border-radius: 17px;
    text-align: center;
    position: absolute;
    top: 2px;
    right: 0;

    .worry-text {
      height: 20px;
      font-size: 9px;
      font-family: PingFang SC;
      color: #a9a9a9;
      line-height: 18px;
    }
  }

  .worry-middle {
    width: 348px;
    display: flex;
    div {
      margin: 0;
      padding: 0;
    }
    img {
      height: 100%;
      width: 100%;
      display: block;
    }
    .worry-left {
      width: 240px;
      height: 160px;
    }
    .worry-right {
      // display: flex;
      width: 108px;
      height: 160px;
      img {
        height: 80px;
      }
    }
  }
}

#aa /deep/ .van-field__control::placeholder {
  color: #949494;
  font-weight: bold;
}

.input {
  background: #f4f4f4;
  .inputmin {
    padding: 0 5px;
  }
  /deep/.van-search__label {
    color: #faa462;
    font-size: 11px;
    font-weight: bold;
  }
  /deep/.van-search__content {
    background: white;
  }
  /deep/i {
    display: none;
  }
}

.three {
  display: flex;
  padding: 22px 12.5px;
  .three-headline {
    height: 33px;
    width: 116px;
    text-align: center;
    font-size: 13px;
    // font-family: PingFang-SC-Regular;
    line-height: 33px;
    background: #f5f5f7;
  }
  .blue {
    background: #1ca0f2;
    color: white;
  }
}

.topic {
  width: 347px;
  height: 210px;
  background: white;
  box-sizing: border-box;
  position: relative;
  border-radius: 5px;
  padding: 13px;

  .headportrait {
    display: flex;

    .name {
      margin-left: 5px;
    }

    .photo {
      height: 30px;
      width: 30px;
    }
  }
  .nameframe {
    display: flex;
    .nickname {
      font-size: 12px;
    }
    .sex {
      width: 15px;
      height: 15px;
      img {
        width: 15px;
        height: 15px;
        display: block;
      }
    }
  }
  .register {
    color: #a8a8a8;
    font-size: 12px;
  }
  .bigheadline {
    margin: 5px 0;
    font-size: 17px;
  }
  .text {
    font-size: 13px;
  }
}
.varied {
  display: flex;
  position: absolute;
  // bottom: 20px;
  .label {
    color: #faaa6b;
    font-size: 10px;
  }
  .lovecomment {
    font-size: 10px;
    display: flex;
    position: relative;
    right: -150px;
    div {
      margin: 0 3px;
      text-align: center;
    }
    img {
      width: 15px;
      height: 15px;
      display: block;
    }
    .comment,
    .love {
      margin-top: -2px;
    }
  }
}

.extra {
  position: fixed;
  right: 23px;
  bottom: 88px;
  img {
    width: 53px;
    height: 53px;
  }
}
</style>
